<template>

	<view>
		<view class="xpt40 xflex-x">
			<button class="xbutton" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
			  <image class="avatar xml40" :src="avatar || ''" mode=""></image>
			</button>
			
			<view class="xml12">
				<view class="name xmt24">账号名称：{{store.user?.userinfo?.username||''}}</view>
				<view class="name xmt24">账号有效期：{{us.expire_time||''}}</view>
			</view>
			<!-- <view class="xflex-x xmt20">
				<view class="xfz24 xc6 xfw500">id：{{store.user.userinfo.id||''}}</view>
				<image class="fz xml24" @click="copy(store.user.userinfo.id)" src="/static/image/icon_fz.png" mode=""></image>
			</view> -->
		</view>

		<view class="order xflex-x-between">
			<view class="order-item xbs xflex-x" v-if="noOrderShow == 1">
				<image class="order-icon" src="/static/image/icon_wdd.png" mode=""></image>
				<view class="order-name">未生成订单</view>
				<view class="order-num">{{totalnum}}</view>
			</view>
			<view class="order-item xbs xflex-x" v-if="yesOrderShow == 1">
				<image class="order-icon" src="/static/image/icon_ydd.png" mode=""></image>
				<view class="order-name">已生成订单</view>
				<view class="order-num">{{total}}</view>
			</view>
		</view>
<!-- 
		<view class="vip pr xmt20 xflex-x-between xbs" @click="toPage('/pages/mine/vip/vip',isto)">
			<image class="pa" style="width: 100%; height: 100%;" src="/static/image/img_bj.png" mode=""></image>
			<view class="vip-left">
				<view class="vip-title">升级会员</view>
				<view class="vip-time">{{us.expire_time_mnp}}</view>
			</view>
			<image class="vip-icon" src="/static/image/img_vip.png" mode=""></image>
		</view> -->
		
		<view class="orders xmt24 xbgf" v-if="orderShow == 1">
			<view class="orders-top xflex-x-between xbb8D xp24">
				<view class="xfz32 xfw600 xc3">我的订单</view>
				<view class="xflex-x" @click="topage('/pages/mine/order/allOrder')">
					<!-- <view class="xfz26 xfw500 xc9">全部订单</view>
					<image class="orders-gd" src="/static/image/mine/gengduo.png" mode="scaleToFill" /> -->
				</view>
			</view>
		
			<view class="xflex-x-between xp24-32 xbs">
				<view class="xflex-y-between pr" v-for="(item, index) in order" :key="index"
					@click="toPage(item.path)">
					<image class="orders-icon" :src="item.icon" mode="scaleToFill" />
					<view class="xfz26 xfw400 xc3">{{ item.title }}</view>
		
				</view>
				
			</view>
		</view>

		<view class="xmt20 next">
			<view class="next-item xflex-x-between xbgf" v-if="rechargeShow == 1" @click="toPage('/pages/mine/recharge')">
				<view class="next-left xflex-x">
					<image class="next-icon xmr24" src="/static/image/icon_mm.png" mode=""></image>
					<view class="next-text">以图搜图充值点</view>
				</view>
				<image class="next-img" src="/static/image/icon_next.png" mode=""></image>
			</view>
			<view class="next-item xflex-x-between xbgf" v-if="teamShow == 1" @click="toPage('/pages/mine/team/team')">
				<view class="next-left xflex-x">
					<image class="next-icon xmr24" src="/static/image/icon_td.png" mode=""></image>
					<view class="next-text">我的团队</view>
				</view>
				<image class="next-img" src="/static/image/icon_next.png" mode=""></image>
			</view>
			<!-- <view class="next-item xflex-x-between xbgf"  v-if="orderShow == 1"  @click="toPage('/pages/mine/order/goods')">
				<view class="next-left xflex-x">
					<image class="next-icon xmr24" src="/static/image/icon_dh.png" mode=""></image>
					<view class="next-text">我的订单</view>
				</view>
				<image class="next-img" src="/static/image/icon_next.png" mode=""></image>
			</view> -->
			<view class="next-item xflex-x-between xbgf" @click="toPage('/pages/mine/password/password')" v-if="mamaShow == 1">
				<view class="next-left xflex-x">
					<image class="next-icon xmr24" src="/static/image/icon_mm.png" mode=""></image>
					<view class="next-text">修改密码</view>
				</view>
				<image class="next-img" src="/static/image/icon_next.png" mode=""></image>
			</view>
			<view class="next-item xflex-x-between xbgf" @click="toPage('/pages/mine/program')" v-if="zhinan == 1">
				<view class="next-left xflex-x">
					<image class="next-icon xmr24" src="/static/image/tabbar/5.png" mode=""></image>
					<view class="next-text">指南</view>
				</view>
				<image class="next-img" src="/static/image/icon_next.png" mode=""></image>
			</view>
			
			
			<view class="next-item xflex-x-between xbgf" @click="toPage('/pages/mine/programs')">
				<view class="next-left xflex-x">
					<image class="next-icon xmr24" src="/static/image/tabbar/5.png" mode=""></image>
					<view class="next-text">关于我们</view>
				</view>
				<image class="next-img" src="/static/image/icon_next.png" mode=""></image>
			</view>
			
			
			<view class="" style="height: 200rpx;">
				
			</view>
		</view>
		
		<view class="xbottom">
			<view class="exit" @click="exit()">
				退出
			</view>
		</view>

		
	</view>


</template>

<script setup>
	import {
		onReachBottom,
		onShow,
		onLoad
	} from '@dcloudio/uni-app';
	import {
		reactive,
		ref
	} from 'vue';
	import {
		useCounterStore
	} from "@/Store/index.js"
	import {
		userinfos,
		cartCalc,
		userlogout,
		site,
		uploadFile,
		editUserInfo ,
		memberLists,
		accesslists
	} from "@/network/home.js"
	const store = useCounterStore()
	let test = ref('测试');
	
	
	let order = [{
			icon: '/static/image/dd1.png',
			title: '待付款',
			path: '/pages/mine/order/orderDetail?type=0'
		},
		{
			icon: '/static/image/dd2.png',
			title: '待审核',
			path: '/pages/mine/order/orderDetail?type=1'
		},
		{
			icon: '/static/image/dd3.png',
			title: '未通过',
			path: '/pages/mine/order/orderDetail?type=2'
		},
		{
			icon: '/static/image/dd4.png',
			title: '待上传',
			path: '/pages/mine/order/orderDetail?type=3'
		},
		{
			icon: '/static/image/dd5.png',
			title: '已完成',
			path: '/pages/mine/record/orderDetail?type=4'
		}
	];

	let show = ref(true)

	const toPage = (url,type=false) => {
		if(type)return
		console.log(type);
		uni.navigateTo({
			url: url
		})
	}
	
	let isto = ref(true)
	
	const getmemberLists = () => {
		memberLists().then(res => {
			console.log(res.data);
			if(res.data.length > 0){
				isto.value = false
			}
		})
	}
	
	let noOrderShow = ref(0)
	let yesOrderShow = ref(0)
	let rechargeShow = ref(0)
	let teamShow = ref(0)
	let orderShow = ref(0)
	let mamaShow = ref(0)
	let zhinan = ref(0)
	const  onsite = () =>{
		accesslists().then(res=>{
			noOrderShow.value = res.data.my_no_order
			yesOrderShow.value = res.data.my_exist_order
			rechargeShow.value = res.data.my_recharge
			teamShow.value = res.data.my_team
			orderShow.value = res.data.my_order
			mamaShow.value = res.data.my_updatepwd
			zhinan.value = res.data.my_guide
			
			
		})
	}
	
	// 上传头像
	const chooseAvatar = async (e) => {
	  let res = await uploadFile(e.detail.avatarUrl)
	  await editUserInfo({
	    avatar: res.data.url
	  })
	  await getuserinfo()
	}
	

	const us = reactive({
		expire_time: '',
		expire_time_mnp:''
	})

	const copy = (data) =>{
		uni.setClipboardData({
			data:data.toString(),
			success: function () {
					uni.showToast({
						title:"复制成功"
					})
				}
		})
	}
	
	let avatar = ref('')

	const getuserinfo = () => {
		userinfos().then(res => {
			console.log(res.code == 401);
			avatar.value = res.data.avatar
			show.value = false
			us.expire_time = res.data.expire_time
			us.expire_time_mnp = res.data.expire_time_mnp

		})
	}
	
	const login = () => {
		uni.redirectTo({
			url: "/pages/index/login"
		})
	}
	let total = ref(0)
	let totalnum = ref(0)
	const getcartCalc = () => {
		cartCalc({method:'mnp'}).then(res => {
			let {
				total_sum,
				total_num
			} = res.data.data
			total.value = res.data.total_sum
			totalnum.value = res.data.total_num
		})
	}
	
	const exit = () =>{
		userlogout({client:2})
		uni.clearStorage()
		
		uni.reLaunch({
			url:"/pages/index/login"
		})
	}

	onShow(() => {
		getuserinfo()
		getcartCalc()
		onsite()
		getmemberLists()

	})
</script>

<style lang="scss">
	.avatar {
		width: 154rpx;
		height: 154rpx;
		background-color: #eee;
		border-radius: 50%;
	}

	.name {
		font-size: 24rpx;
		font-weight: bold;
		color: #111111;
	}

	.fz {
		width: 26rpx;
		height: 26rpx;
	}

	.order {
		padding: 30rpx 32rpx 20rpx;

		&-item {
			width: 335rpx;
			height: 90rpx;

			border: 1px solid #3f7233;
			padding: 28rpx 26rpx;
			background: #3f723305;
			border-radius: 10rpx;
		}

		&-icon {
			width: 34rpx;
			height: 34rpx;
			margin-right: 11rpx;
		}

		&-name {
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #3f7233;
			margin-right: 7rpx;
		}

		&-num {
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #3f7233;
		}
	}

	.vip {
		margin: auto;
		width: 690rpx;
		height: 150rpx;
		// border: 1px solid #ffde00;
		// background: linear-gradient(90deg, #ffa98750, #f141c850, #ffa98750);
		
		border-radius: 10rpx;

		&-icon {
			width: 140rpx;
			height: 140rpx;
		}

		&-left {
			padding: 29rpx 31rpx;
			height: 100%;
			box-sizing: border-box;
		}

		&-title {
			font-size: 32rpx;
			font-weight: 500;
			color: #222222;
		}

		&-time {
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			margin-top: 16rpx;
		}
	}
	.orders {
		width: 686rpx;
		height: 246rpx;
		margin: auto;
		margin-top: 24rpx;
		background: #ffffff;
		box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.05);
		border-radius: 12rpx;
	
		&-gd {
			width: 14rpx;
			height: 25rpx;
			margin-left: 6rpx;
		}
	
		&-top {
			// height: 92rpx;
			box-sizing: border-box;
		}
	
		&-icon {
			width: 56rpx;
			height: 56rpx;
			margin-bottom: 8rpx;
		}
	}
	.next {
		padding: 20rpx 30rpx;

		&-item {
			padding: 29rpx;
		}

		&-icon {
			width: 44rpx;
			height: 44rpx;
		}

		&-img {
			width: 40rpx;
			height: 30rpx;
		}
	}

	.popup {
		width: 600rpx;
		height: 400rpx;
		background: #FFFFFF;
		border-radius: 20rpx;

		&-title {
			font-size: 36rpx;
			font-weight: bold;
			color: #333333;
			margin-top: 50rpx;
			text-align: center;
		}

		&-content {
			width: 349rpx;
			height: 57rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 31rpx;
			margin: auto;
			margin-top: 50rpx;
			text-align: center;
		}

		&-btn {
			width: 220rpx;
			height: 80rpx;
			background: #3F7233;
			border-radius: 10rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			line-height: 80rpx;
			text-shadow: 0rpx 2rpx 10rpx rgba(0, 0, 0, 0.2);
			text-align: center;
			margin: auto;
			margin-top: 95rpx;
		}
	}
	
	.exit {
		width: 686rpx;
		height: 80rpx;
		background: #F5F5F5;
		border-radius: 40rpx;
		font-size: 28rpx;
		font-weight: 500;
		color: #666666;
		line-height: 80rpx;
		text-align: center;
	}
</style>